<template>
  <el-menu class="asideMenu" default-active="0" :collapse="showMenu" router>
      <template v-for="(item,ind) in menuList">
        <el-submenu v-if="item.children" :index="`${ind+1}`" :key="ind">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
          </template>
          <template v-for="(item_c,ind_c) in item.children">
          <el-submenu v-if="item_c.children" :index="`${ind+1}-${ind_c+1}`" :key="ind_c">
            <template slot="title">{{item_c.name}}</template>
            <el-menu-item v-for="item_cc in item_c.children" :key="item_cc.id" :index="item_cc.path" @click="clickMenu">
              <span>{{item_cc.name}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item_c.path" :key="ind_c" @click="clickMenu">
            <i :class="item_c.icon"></i>
            <span>{{item_c.name}}</span>
          </el-menu-item>
        </template>
        </el-submenu>
        <el-menu-item v-else :index="item.path" :key="ind" @click="clickMenu">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </el-menu-item>
      </template>
  </el-menu>
</template>

<script>
export default {
  props: {
    showMenu: {
      type: Boolean,
    },
    isClick:{
      type: Boolean,
    },
  },
  data() {
    return {
      openIndex: ['0'],
      asideStyle: {
        background: '#2c3e50',
        textColor: '#ffffff',
        activeColor: '#ffd04b',
      },
      menuList: [
        {
          name:'首页',
          icon:'el-icon-house',
          id:0,
          path:'/'
        }
        ,
        // {
        //   name: '汉语查询',
        //   icon: 'el-icon-message',
        //   id: 1,
        //   children: [
        //     {
        //       name: '成语词典',
        //       id: 11,
        //       path: '/idiom',
        //     },
        //   ]
        // },
        {
          name: '用户列表',
          icon: 'el-icon-message',
          id: 1,
          children: [
            {
              name: '用户列表',
              id: 11,
              path: '/system/userList',
            },
          ]
        },
        {
          name: 'Demo',
          icon: 'el-icon-menu',
          id: 2,
          children:[
            {
              name: '表单',
              id: 21,
              path: '/demoForm',
            },
            {
              name: '列表',
              id: 22,
              path: '/demoList',
            },
            {
              name: '弹窗',
              id: 23,
              path: '/demoDialog',
            },
          ]
        },
        {
          name: '导航三',
          icon: 'el-icon-setting',
          id: 3,
          children:[
             {
              name: '选项一',
              id: 31,
              path: '',
            },
            {
              name: '选项二',
              id: 32,
              path: '',
            },
          ]
        }
      ],
    }
  },
  methods: {
    clickMenu(){
      this.$parent.isClick = false;
    }
  },
}
</script>

<style lang="scss" scoped>
.asideMenu {
  &:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
}
</style>
